<!DOCTYPE html>
<html class="g-html">
<head>
	<meta charset="utf-8" />
	<meta name="renderer" content="webkit" />
	<meta name="keywords" content="Nui,Nui框架,Nui组件,axnfex,诺诺框架,诺诺前端,爱信诺框架,爱信诺前端" />
	<meta name="description" content="Nui框架是诺诺网前端团队根据自身业务的特点开发出来的模块化前端框架，提供了丰富的组件以适应不同业务需求进行快速开发。" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Nui.js</title>
    <link rel="icon" type="image/vnd.microsoft.icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="shortcut icon" type="image/x-icon" href="/nui/assets/images/favicon.ico?v=f076652"/>
	<link rel="stylesheet" type="text/css" href="/nui/assets/style/base-min.css?v=0de6a3f"/>
    
</head>
<body class="g-body">
	<!-- header -->
	<div class="g-header f-clearfix">
	    <a class="m-logo f-fl" href="/nui/">
            <img src="/nui/assets/images/logo.png?v=a987f30" alt="Nui.js" class="f-fl" />
            <em class="f-fl e-ml10 f-fs24">Nui.js</em>
        </a>
        <ul class="m-nav f-fr f-fs16">
            
	
	
    <li class="f-fl">
        <a class="s-crt" href="/nui/pages/">教程</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/2017/02/28/jobs/" target="_blank">加入我们</a>
    </li>
    <li class="f-fl">
        <a href="http://zjaisino.github.io/" target="_blank">前端规范</a>
    </li>
    <li class="f-fl">
        <a href="https://axnfex.github.io/" target="_blank">团队博客</a>
    </li>


        </ul>
	</div>
	<!-- /header -->

	<!-- content -->
	<div class="g-content">
    
<div id="data" style="margin:100px; height:50%;"></div>
	<div class="g-main f-fr">
		<div class="mainbox">
            <h1 class="e-pt20 e-pb20 f-fs28">数据网格</h1>
			
			<!-- <style>
			.ui-table { width: 100%;}
			.ui-table td { height: 60px;}
			.ui-table td, .ui-table th { padding:5px; line-height: 20px; border:1px solid #ECEDEF; vertical-align: middle; font-size: 13px; word-break:break-all; box-sizing: content-box;}
			.ui-table th { text-align: center; background-color: #F7FAFF;}
			.ui-table .rows:hover { background-color: #F1FCFF;}
			.ui-table .rows.s-crt, .ui-table .rows.s-crt:hover { background-color: #D9F6FF;}
			.ui-table .table-row.s-hover { background-color: #F1FCFF;}
			.ui-table .table-row.s-crt { background-color: #D9F6FF !important;}
			.ui-table-nobd th { border:none;}
			.ui-table-nobd td { border-left:none; border-right:none;}

			
			.datagrid-table .ui-table { table-layout: fixed;}
			.datagrid-table .table-cell { padding-left: 0; padding-right: 0; text-align: center; vertical-align: middle;}
			.datagrid-table .cell-wrap, .datagrid-table .cell-text { display: inline-block; vertical-align: middle;}
			.datagrid-table .cell-wrap { width: 100%;}
			.datagrid-table .cell-text { margin: 0 5px;}
			.datagrid-table .cell-wrap.cell-nowrap { overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
			.datagrid-body, .datagrid-thead, .datagrid-title { position: relative;}
			.datagrid-fixed .datagrid-box { margin-top: -1px;}
			.datagrid-box { overflow: auto;}
			.datagrid-table-all .ui-table { width: 100%;}
			.datagrid-table-all .datagrid-thead { overflow: hidden; width:100%;}
			.datagrid-table-all .datagrid-box { width: 100%;}
			.datagrid-table-fixed { position: absolute; top:0; z-index: 1; background-color: #fff;}
			.datagrid-table-fixed .datagrid-box { overflow: hidden;}
			.datagrid-table-fixed .ui-table { width: auto;}
			.datagrid-table-left { left: 0;}
			.datagrid-table-right { right: 0;}
			.datagrid-paging { padding-top: 20px; height:30px;}
			.datagrid-order { position: relative; display: inline-block;}
			.datagrid-order b { left: 3px; cursor: pointer;}
			.datagrid-order b, .datagrid-order s, .datagrid-order i { position: absolute;}
			.datagrid-order s, .datagrid-order i { line-height:0; font-size:0; border:6px dashed transparent;}
			.datagrid-order-asc { top: -14px;}
			.datagrid-order-asc i { border-bottom-style:solid; border-bottom-color:#ccc;}
			.datagrid-order-asc.s-crt i { border-bottom-color:#46679e;}
			.datagrid-order-desc { bottom: 7px;}
			.datagrid-order-desc i { border-top-style:solid; border-top-color:#ccc;}
			.datagrid-order-desc.s-crt i { border-top-color:#46679e;}
			.datagrid-order-both .datagrid-order-asc { top:-18px;}
			.datagrid-order-both .datagrid-order-desc { bottom:2px;}
			
			
			
			
			.ui-paging { overflow:hidden; background-color:#fff;}
			

.ui-paging li { float:left; display:inline; text-align:center; margin-right:5px; line-height:22px;}
.ui-paging span,.ui-paging a,.ui-paging em,.ui-paging input,.ui-paging button { float:left;}
.ui-paging span,.ui-paging a { height:22px; width:22px; text-align:center; border:1px solid #ccc;}
.ui-paging span { background-color:#efefef;}
.ui-paging input { border:1px solid #DBDBDB; width:30px; height:22px; margin:0 3px; text-align:center; line-height:22px;}
.ui-paging button { margin-left:2px; width:40px; height:24px; border:1px solid #DBDBDB; background:#fff; cursor:pointer;}

.ui-checkradio, .ui-checkradio em, .ui-checkradio i { display:inline-block;}
.ui-checkradio em { cursor:pointer;}
.ui-checkradio input { opacity:0; filter:alpha(opacity=0);}
.ui-checkradio i { width:14px; height:14px; background:url("./images/check.png?v=4476ed8") no-repeat;}
.ui-checkradio .ui-checkbox.s-checked i { background-position:-20px 0;}
.ui-checkradio .ui-checkbox.s-dis i { background-position:-40px 0;}
.ui-checkradio .ui-radio i { background-image:url("./images/radio.png?v=474eea8"); background-position: 0 -15px;}
.ui-checkradio .ui-radio.s-checked i { background-position:-15px -15px;}
.ui-checkradio .ui-radio.s-dis i { cursor:default; background-position: 0 0;}
.ui-checkradio .ui-radio.s-checked.s-dis i { background-position: -15px 0;}
.ui-checkradio .txt { margin-top: -1px; margin-left: 5px;}
			</style> -->
		</div>
	</div>
	
	
<div class="f-fl g-sidecol">
    <div class="side">
        <ul class="m-menu f-lh28">
            <li>
                <a class="f-fs16" href="/nui/pages/">介绍</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/doc.html">API文档</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/util.html">实用工具</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/template.html">模板引擎</a>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/events.html">代理事件</a>
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/element.html">页面元素</a>
                
            </li>
            <li>
                <a class="f-fs16 s-crt" href="/nui/pages/components/">交互组件</a>
                
                <ul>
                    <li>
                        <a  href="/nui/pages/components/#开发组件">开发组件</a>
                        
                    </li>
                    <li>
                        <a href="/nui/pages/components/router/">路由</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/layer/">弹出层</a>
                    </li>
                    <li>
                        <a class="s-crt" href="/nui/pages/components/datagrid/">数据网格</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/placeholder/">输入框占位符</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/input/">输入框增强</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/popover/">提示框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/search/">搜索</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/select/">选择器</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/calendar/">日历</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/tab/">选项卡</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/paging/">分页</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/carousel/">走马灯</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/upload/">文件上传</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/radio/">单选框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/checkbox/">复选框</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/fixed/">固钉</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/fixed/">数字输入</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/print/">打印</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/collapse/">折叠面板</a>
                    </li>
                    <li>
                        <a href="/nui/pages/components/validate/">表单校验</a>
                    </li>
                </ul>
                
            </li>
            <li>
                <a class="f-fs16" href="/nui/pages/pack.html">打包工具</a>
                
            </li>
        </ul>
    </div>
</div>


	</div>
	<!-- /content -->

	

    <script type="text/javascript" src="/nui/assets/script/jquery.min.js?v=4223d4c"></script>
<script type="text/javascript" src="/nui/dist/nui-load-min.js?v=94ae756"></script>
<script type="text/javascript" src="/nui/config.js?v=d40711c"></script>
    
    <script type="text/javascript">
	Nui.load("{script}/base-min", function(page){
        page.init()
    })
    </script>
    
    <script type="text/javascript">
    
Nui.load("./script/demo")

    </script>
</body>
</html>